<template>
	<div ref="chartDom" v-loading="loading" class="chart"></div>
</template>

<script setup lang="ts" name="treeECharts">
import { queryTalentIndustryList } from '/@/api/cx/list';
import * as echarts from 'echarts';
const emit = defineEmits(['change']);
const chartDom = ref();
let myChart = null;
const loading = ref<boolean>(false);
const data = ref<any>([]);
function mapInit() {
	myChart = echarts.init(chartDom.value);

	// const data = {
	// 	name: '生物产业',
	// 	value: 100000,
	// 	children: [
	// 		{
	// 			name: '其他生物业',
	// 			value: 200,
	// 			children: [
	// 				{ name: '生物基材料制造', value: 200, itemStyle: { color: '#975e6d' } },
	// 				{
	// 					name: '生物化工制品制造',
	// 					value: 200,
	// 					itemStyle: { color: '#e0719c' },
	// 				},
	// 			],
	// 		},
	// 		{
	// 			name: '生物医药',
	// 			value: 200,
	// 			itemStyle: { color: '#da1d23' },
	// 			children: [
	// 				{
	// 					name: '生物药品制品制造',
	// 					value: 200,
	// 					itemStyle: { color: '#dd4c51' },
	// 				},
	// 				{
	// 					name: '化学药品与原料药制造',
	// 					value: 200,
	// 					itemStyle: { color: '#c94a44' },
	// 				},
	// 				{
	// 					name: '现代中药与民族药制造',
	// 					value: 200,
	// 					itemStyle: { color: '#dd4c51' },
	// 				},
	// 				{
	// 					name: '生物医药相关服务',
	// 					value: 200,
	// 					itemStyle: { color: '#f7a128' },
	// 				},
	// 			],
	// 		},
	// 		{
	// 			name: '生物医学工程',
	// 			value: 200,
	// 			itemStyle: { color: '#ebb40f' },
	// 			children: [
	// 				{
	// 					name: '先进医疗设备及器械制造',
	// 					value: 200,
	// 					itemStyle: { color: '#e1c315' },
	// 				},
	// 				{
	// 					name: '植介入生物医用材料及设备制造',
	// 					value: 200,
	// 					itemStyle: { color: '#b09733' },
	// 				},
	// 			],
	// 		},
	// 		{
	// 			name: '生物农业及相关',
	// 			value: 200,
	// 			itemStyle: { color: '#187a2f' },
	// 			children: [
	// 				{ name: '橄榄油', value: 1, itemStyle: { color: '#a2b029' } },
	// 				{ name: '生的/未加工', value: 1, itemStyle: { color: '#718933' } },
	// 				{
	// 					name: '绿色/蔬菜',
	// 					value: 100,
	// 					itemStyle: { color: '#3aa255' },
	// 				},
	// 				{ name: '大豆制品', value: 1, itemStyle: { color: '#5e9a80' } },
	// 			],
	// 		},
	// 		{
	// 			name: '生物质能产业',
	// 			value: 200,
	// 			itemStyle: { color: '#0aa3b5' },
	// 			children: [
	// 				{
	// 					name: '生物农药制造',
	// 					value: 200,
	// 					itemStyle: { color: '#9db2b7' },
	// 				},
	// 				{
	// 					name: '生物肥料制造',
	// 					value: 200,
	// 					itemStyle: { color: '#76c0cb' },
	// 				},
	// 			],
	// 		},
	// 	],
	// };

	const option = {
		tooltip: {
			trigger: 'item',
			triggerOn: 'mousemove',
			formatter: function (params:any) {
				// 获取数据的层级信息
				let name  = params.data.name;
				let value  = params.data.value;
				// 获取最后一级的数据

				// 自定义显示内容
				return `${name}：${value}`;
			},
		},
		dataRange: {
			min: 0,
			max: 200,
			text: ['最大值', '最小值'],
			// realtime: false,
			// calculable: true,
			color: ['#e6752f', '#2A74AF'],
			orient: 'horizontal',
			left: '5%',
		},
		series: [
			{
				type: 'tree',
				//roam: true,
				id: 0,
				name: 'tree1',
				data: data.value,
				top: '30',
				left: '8%',
				bottom: '30',
				right: '15%',
				symbolSize: 15,
				edgeShape: 'polyline',
				edgeForkPosition: '63%',
				initialTreeDepth: 100,
				lineStyle: {
					width: 2,
				},
				label: {
					formatter: '{b}:{c}',
					backgroundColor: '#fff',
					position: 'bottom',
					verticalAlign: 'top',
					align: 'center',
				},
				leaves: {
					label: {
						position: 'right',
						verticalAlign: 'middle',
						align: 'left',
					},
				},
				emphasis: {
					focus: 'descendant',
				},
				linkpistance: 10,
				// 调整节点间距
				nodeInterval: 50,
				// 调整节点深度
				levelInterval: 10,
				// 点击是否展开
				expandAndCollapse: false,
				animationDuration: 550,
				animationDurationUpdate: 750,
			},
		],
	};

	option && myChart.setOption(option);
	myChart.on('click',handleClick)
	loading.value = false;
}

function handleClick (param:any){
	emit('change',param.data.id)
}
function init(query: any) {
	loading.value = true;
	queryTalentIndustryList(query).then((res) => {
		if (res.code == 0) {
			data.value = res.data;
			mapInit();
		}
	});
}
defineExpose({
	init,
});
</script>

<style lang="scss" scoped>
.chart {
	height: 3000px;
	width: 100%;
}
</style>
